import React, {
  Component,
  useState,
  useEffect,
} from "react";

import ScrollableTabView, {
  ScrollableTabBar,
} from 'react-native-scrollable-tab-view';

import Content from "../../components/content/content";
import styles from "./last-rank-sheet";
import NowRank from '../now-rank/now-rank';

import * as statusBarSetting from '../../model/statusBarSetting';

export default function LastRank(props) {
  statusBarSetting.useSetBackground(props);

  return (
    <ScrollableTabView style={styles.scrollableTabView}
      tabBarUnderlineStyle = {{backgroundColor:'#f6db7b',height:2}} //设置选中的Tab文字下方横线的样式
      tabBarBackgroundColor= 'white' //Tab的背景颜色
      tabBarActiveTextColor = '#f6db7b' //设置选中的Tab文字的颜色
      tabBarInactiveTextColor = 'gray' //设置未必选中的Tab文字的颜色
      tabBarTextStyle = {{fontSize: 14}} //设置Tab上字体的样式
      initialPage={0}//初始化被选中的tab下标，默认0 
      locked={false}
      renderTabBar={() => <ScrollableTabBar />}
    >
      <NowRank tabLabel='本月收入排名' type={1} />
      <NowRank tabLabel='上月收入排名' type={2} />
    </ScrollableTabView>
  );
}